<template>
    <div class="active-period" v-loading="loading">
        <el-row class="filter-wrap">
            <el-radio-group v-model="checkedType" @change="handleCheckedTypesChange">
                <el-radio v-for="{label, value} in typeOptions" :label="value" :key="label"
                >{{label}}
                </el-radio>
            </el-radio-group>
        </el-row>
        <div v-auto-resize ref="chartEl" class="chart-wrap"/>
    </div>
</template>

<script>
import throttle from 'lodash/throttle'
import echarts from 'echarts'
import EchartsBase from '@/mixins/echarts-base'
import AutoResize from '@/directive/echart-resizer'
import { subComponentMixin } from '@/mixins/user-data'

let oChart, lineData
export default {
  name: 'ActivePeriod',
  mixins: [EchartsBase, subComponentMixin],
  directives: {
    AutoResize
  },
  data () {
    return {
      loading: true,
      checkedType: '1',
      typeOptions: [
        {
          label: '时间段访问人数',
          value: '1'
        },
        {
          label: '时间段访问时长',
          value: '2'
        },
        {
          label: '时间段使用时长',
          value: '3'
        }
      ],
      throttleGetHighActiveTimeRange: throttle(this._getHighActiveTimeRange, 1000)
    }
  },
  created () {
    this._getHighActiveTimeRange().then(() => {
      this.$nextTick().then(() => {
        oChart = echarts.init(this.$refs.chartEl)
        this.setOption()
      })
    })
  },
  methods: {
    getData () {
      this._getHighActiveTimeRange()
    },
    setOption () {
      const xAxisLabel = []
      const lineArr = []
      for (const { variable, Time } of lineData) {
        lineArr.push(variable || 0)
        xAxisLabel.push(Time)
      }

      const axisBasic = {
        splitLine: {
          show: true,
          lineStyle: {
            color: '#E9EBF1',
            type: 'dashed'
          }
        },
        axisTick: {
          show: false
        }
      }

      const option = {
        tooltip: {
          trigger: 'axis'
        },
        color: ['#d94e5d', '#eac736', '#50a3ba'],
        grid: {
          top: '16%',
          left: '2%',
          right: '2%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxisLabel,
          axisLine: {
            show: false
          },
          ...axisBasic
        },
        yAxis: [
          {
            type: 'value',
            name: '使用次数/次',
            nameTextStyle: {
              align: 'reight',
              color: '#212529'
            },
            axisLine: {
              lineStyle: {
                color: '#E9EBF1'
              }
            },
            axisLabel: {
              color: '#212529'
            },
            ...axisBasic
          },
          {
            type: 'value',
            name: '用户数/人',
            nameTextStyle: {
              align: 'right',
              color: '#212529'
            },
            axisLine: {
              lineStyle: {
                color: '#E9EBF1'
              }
            },
            axisLabel: {
              color: '#212529'
            },
            ...axisBasic
          }
        ],
        series: [
          {
            name: '数量',
            type: 'line',
            stack: '总量',
            data: lineArr
          }
        ]
      }
      oChart.setOption(option)
    },
    async _getHighActiveTimeRange () {
      this.loading = true
      const { data: { data: { result }, code } } = await this.$http
        .get(this.getApiUrl('dataanalysis_iot/user/getHighActiveTimeRange', false),
          {
            params: Object.assign({ chart_type: this.checkedType }, this.formatParams(this.queryData))
          })
      this.loading = false
      if (code === 0) {
        lineData = result
        if (oChart) {
          this.setOption()
        }

        return result
      }
    },
    handleCheckedTypesChange () {
      this.throttleGetHighActiveTimeRange()
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "~element-theme-chalk/src/common/var.scss";
    @import "@/assets/scss/modules/variables-module.scss";

    .active-period, .chart-wrap {
        width: 100%;
        height: 100%;
    }

    .active-period {
        position: relative;
    }

    .filter-wrap {
        position: absolute;
        top: 0;
        right: $gap-default;
        z-index: 1000;

        ::v-deep {
            .el-radio__input {
                display: none;
            }

            .el-radio__label {
                padding: 2px 10px;
                border-radius: $--border-radius-base;
                margin-bottom: 5px;
            }

            .el-radio.is-checked {
                .el-radio__label {
                    color: $input-font-color;
                    background-color: $input-background-color;
                }
            }
        }
    }
</style>
